<template>
  <div class="con">
    <!-- 内容上 -->
    <!-- 大图滚动 -->
    <!-- <div class="swiper-container dtgd">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="img/vip_ad1.jpg"></div>
            <div class="swiper-slide"><img src="img/vip_ad2.jpg"></div>
        </div>
        <div class="swiper-pagination dd"></div>
    </div> -->
    <!-- 内容下 -->
    <div class="block clear">
      <a v-for="sale in sales" href="detail.html?id={{sale.id}}">
        <img v-bind:src=sale.img>
        <p class="name">{{sale.name}}</p>
        <p class="price">
          <span>{{sale.price}}</span>
          <span>原价:</span>
          <span class="yPrice">{{sale.yPrice}}</span>
        </p>
      </a>
      
    </div>
<div class="di"></div>
  </div>
</template>

<script>
export default {
 data () {
    return {      
      sales:[
      ]
    }
  },
  methods:{
    choses:function(){   
    }
  },
  ready:function(){
    var _this = this;
    $.ajax({
      type:"GET",
      url:"http://172.16.18.44/php/vip.php?cb=JSON_CALL&",
      dataType:"jsonp",
      jsonp:"cb",
      success:function(data){
          _this.sales = data;
      }
    })
  }
}
</script>

<style scoped>
.di{
  padding: 0.26rem;
}
.con{
  width: 100%;
  background-color: #f2f2f2;
}
.con .dtgd{
  width: 100%;
}
.con .dtgd img{
  width: 100%;
}
.con .block{
  margin: 3% 3% 0 3%;
  width: 94%;
  background-color: #f2f2f2;
  /*border: 0.5px solid red;*/
}
.con .block a{
  float: left;
  width: 48.8%;
  margin-bottom: 3%;
  background-color: #ffffff;
  /*border: 0.5px solid blue;*/
}
.con .block a:nth-child(2n){
  margin-left: 2.35%;
}
.con .block a img{
  width: 100%;
}
.con .block a .name{
  height: 0.5rem;
  font-size: 0.16rem;
  color: black;
  padding: 0.06rem 0 0.04rem 0;
  margin: 0 0.1rem;
  text-overflow: ellipsis;
  overflow: hidden;
}
.con .block a .price{
  margin: 0 0.1rem;
}
.con .block a .price span:nth-child(1){
  color: red;
  font-size: 0.15rem;
  margin-right: 0.1rem;
}
.con .block a .price span:nth-child(2),span:nth-child(3){
  color: #666666;
  font-size: 0.14rem;
}
.con .block a .price span:nth-child(3){
  text-decoration: line-through;
}
</style>
